<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      fixed
      placeholder
      :title="category | Fenlei"
      @click-left="$router.go(-1)"
      @click-right="showShare = true"
    >
      <template #left>
        <van-icon color="#ee0a24" name="arrow-left" size="18" />
      </template>
      <template #right>
        <van-icon color="#ee0a24" name="share-o" size="18" />
      </template>
    </van-nav-bar>
    <!-- 分享 -->
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" />
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <!-- 卡片列表 -->
      <van-card
        @click="$router.push(`/Detail/${category}/${index}`)"
        :thumb="item.img"
        v-for="(item, index) in value"
        :key="index"
        style="background-color: #fff; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%)"
      >
        <template #title>
          <div class="title" style="font-size: 16px">{{ item.recipe_name }}</div>
        </template>
        <template #desc>
          <div class="desc">
            <span v-for="(shicai, i) in item.ingredients" :key="i">
              {{ shicai }}
            </span>
          </div>
          <!-- 作者 -->
          <div style="font-size: 1rem; margin-top: 0.7em; color: #aaa">
            <van-icon name="user-circle-o" /> {{ item.username }}
          </div>
        </template>
        <!-- <template #footer>
          <div style="color: #aaa">
            点赞
            <span style="display: inline-block; margin: 0 10px 0 20px">125</span>
            <van-icon
              size="16"
              name="good-job-o"
              @click.stop="giveLike"
              :class="{ active: countLike % 2 != 0 }"
            />
            收藏
            <span style="display: inline-block; margin: 0 10px 0 20px">125</span>
            <van-icon size="16" name="star-o" />
          </div>
        </template> -->
      </van-card>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  props: ['value', 'category'],
  data() {
    return {
      countLike: 0,
      isLoading: false,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    }
  },
  methods: {
    onRefresh() {
      setInterval(() => {
        this.isLoading = false
      }, 1000)
    },
    giveLike() {
      this.countLike++
      if (this.countLike % 2 != 0) {
        console.log(this.countLike)
      }
    },
  },
  mounted() {
    console.log(this.value)
  },
  filters: {
    Fenlei: function (value) {
      // category: ['川菜', '鲁菜', '闽菜', '粤菜', '苏菜', '浙菜', '湘菜', '徽菜'],
      if (value == 'chuancai') {
        return '川菜'
      } else if (value == 'lucai') {
        return '鲁菜'
      } else if (value == 'mincai') {
        return '闽菜'
      } else if (value == 'yuecai') {
        return '粤菜'
      } else if (value == 'sucai') {
        return '苏菜'
      } else if (value == 'zhecai') {
        return '浙菜'
      } else if (value == 'xiangcai') {
        return '湘菜'
      } else if (value == 'huicai') {
        return '徽菜'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin: 5px 0 10px 0;
  font-size: 1.6em !important;
  font-weight: 700;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desc {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.2em;
  width: 60vw;
  color: #aaa;
}
.active {
  color: #ee0a24;
}
</style>
